<template>
  <div class="TableOperate">
    <div class="top">
      <a-popover trigger="click" placement="bottom" v-model="opretaShow" :class="operateBtn? '' : 'hid'" style="margin-right:12px">
        <template slot="content">
          <p v-for="item in operateBtn" :key="item.id" class="operateBtn" @click="operateBtnClick(item.id)">{{$t(item.name)}}</p>
        </template>
        <a v-if="operateBtn && operateBtn.length" class="operate">{{$t('searchList.bachOperate')}}<i class="iconfont icon-zhankai"></i></a>
      </a-popover>
      <span v-if="!noDate" style="margin-right:6px">
        {{dateName || `${$t('searchList.positionPubishDate')}：`}}
      </span>
      <a-dropdown :trigger="['click']" v-if="!noDate">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          <a class="blue_text">{{ $t(dateText) }}<i class="iconfont icon-zhankai"></i></a>
        </a>
        <a-menu slot="overlay">
          <a-menu-item v-for="item in deliveryDate" :key="item.id" @click="changeDate(item)">
            <a @click="clickDeliveryDateFn(item)">{{ $t(item.name) }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <search-list ref="SearchList" :valueFileds="valueFileds" :searchList="searchList" @searchFormValue="searchFormValue" :searchTitle="searchTitle" :refresh="refresh"></search-list>
  </div>
</template>

<script>
import SearchList from '@/components/SearchList/SearchList'
export default {
  props: ['deliveryDate', 'searchList', 'searchTitle', 'noDate', 'refresh', 'valueFileds', 'dateName', 'operateBtn', 'dateData'],
  name: 'TableOperate',
  components: { SearchList },
  data () {
    return {
      opretaShow: false,
      dateShow: false,
      dateText: 'searchList.dateText'
    }
  },
  // watch: {
  //   dateData: {
  //     handler (newValue, oldValue) {
  //       if (newValue) {
  //         this.$nextTick(() => {
  //           this.dateText = newValue.dateText
  //           this.clickDeliveryDateFn(newValue)
  //         })
  //       }
  //     },
  //     deep: true,
  //     immediate: false
  //   }
  // },
  created () {
    if (this.dateData) {
      this.dateText = this.dateData.name
      this.clickDeliveryDateFn(this.dateData)
    }
  },
  methods: {
    clearSearch () {
      this.$refs.SearchList.clear()
    },
    resetSearch () {
      this.$refs.SearchList.searchPosition()
    },
    clearDate () {
      this.dateText = 'searchList.dateText'
    },
    changeDate (item) {
      this.dateText = item.name
    },
    clickDeliveryDateFn (item) {
      this.$emit('chooseDeliveryDate', item)
    },
    searchFormValue (values) {
      debugger
      this.$emit('searchFormValue', values)
    },
    operateBtnClick (operaVal) {
      this.opretaShow = false
      this.$emit('batchOperation', operaVal)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.TableOperate
  .top
    padding 14px 20px
  .operate
    .icon-zhankai
      color textGrey
  .dateCss
    margin-left 24px
  // .hid
  //   display none
  .icon-zhankai
    font-size 13px
.operateBtn
  line-height 28px
  cursor pointer
.blue_text
  color var(--blue-500)
</style>
